{% load static %}
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>{{data.title}}</title>
		<link href="{% static 'css/reset.css' %}" rel="stylesheet" />
		<link href="{% static 'css/homeBanner.css' %}" rel="stylesheet" />
		<link href="{% static 'css/homeServer.css' %}" rel="stylesheet" />
		<link href="{% static 'css/homeDemo.css' %}" rel="stylesheet" />
		<link href="{% static 'css/homeAddress.css' %}" rel="stylesheet" />
		
		<link href="{% static 'css/animation.css' %}" rel="stylesheet" />
		<link href="{% static 'css/animate.min.css' %}" rel="stylesheet" />
		
		<script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}"></script>
		<script type="text/javascript" src="{% static 'js/jquery.SuperSlide.2.1.1.js' %}"></script>
		<script type="text/javascript" src="{% static 'js/jquery.zoomImgRollover.js' %}"></script>
		<meta />
	</head>
	<body>
		<!--头部 ===================================page02_x-->
		{% include 'header.html' %}
		<!--头部 ===================================-->
		<!--homeBanner ============================-->
		<div class="banner" style="position: relative">
			<div id="slideBox" class="slideBox"
				style="background: url(/static/images/page01.jpg) no-repeat center; background-size: cover;">
				<ul>
					<li>
						<div class="li-img">
						</div>
						<div class="li-word">
							<div class="word-con  ">
								<div class="word-con-1 bounceInDown animated bounce">
									<div class="con-li zww">
										<span>{{data.course.zgssn}}</span>
									</div>
									<div class="con-li eww">
										<p class="hinge-p1 hinge animated bounce">{{data.course.through}}</p>
										<p class="hinge-p2 ">{{data.course.internet}}</p>
									</div>
								</div>
								<div class="con-li zhzj" style=" width: 100%; margin-top: -20px;">
									<span>{{data.course.lczhzj}}</span>
								</div>
								<div class="con-li img_li   animated bounce" style="width: 100%;">
									{% for htmldata in data.course.htmlType5 %}
									<div class="img_div ">
										<a target="_blank" href="{{htmldata.htmlPath}}"><img
												class=" img11 fadeInLeft bounce animated   " src="{{htmldata.htmlImg}}">
											<p class="asfwege3wrgh">
												{{htmldata.htmlTit}}
											</p>
										</a>
									</div>
									{% endfor %}
									<div class="bottom_lanle" style="width: 90%">
										{{data.course.ygzhsgwz}}
									</div>
								</div>
							</div>
						</div>
						<a class="li-zx" href="http://wpa.qq.com/msgrd?v=3&uin=944245073&site=qq&menu=yes"
							target="_blank">{{data.course.djzx}}</a>
					</li>
				</ul>
			</div>
		</div>
		<a class="loadMore fadeInDown  animated infinite" href="#">
			<img style="width: 40px;"
				src="" /></a>
		</div>
		<script type="text/javascript">
			$('.img_div img').hover(function() {

				$('.img_div img').removeClass('img11');
				$('.img_div img').removeClass('fadeInLeft  bounce');
				$('.img_div img').removeClass('fadeInRight bounce');
				$(this).addClass('shake bounce');
			}, function() {
				$('.img_div img').removeClass('shake bounce');
			});
			setTimeout(function() {
				$('.hinge-p1').removeClass('hinge');
				$('.hinge-p1').addClass('rollIn');
			}, 3500);
			$('.loadMore').click(function() {
				var offsetTop = $('.page-title').offset();
				$('html, body').animate({
					scrollTop: offsetTop.top - 190
				}, 1000);
			})
			jQuery(".slideBox").slide({
				mainCell: ".bd ul",
				effect: "fold",
				autoPlay: true
			});
		</script>
		<!--homeBanner end============================ -->
		<!--page02-->
		<div class="page02_x">
			<div class="page02_x_head">
				<div style="height: 20px"></div>
				<div class="page02_x_head_label">
					{% for cj in data.achievement %}
					<div class="page02_x_head_label_1">
						<span class="label_Impat">{{cj.cjNum}} </span><span class="label_heiti"> {{cj.cjUnit}}</span>
						<p class="label_bottom">{{cj.cjDetails}}</p>
					</div>
					{% endfor %}
				</div>

			</div>
			<div class="page02_x-con">
				<h2 class="page-title">
					<span class="page-title-1">{{data.serverList.0}}</span> <span
						class="page-title-2">{{data.serverList.1}}</span>
					<p class="page-title-3">{{data.serverList.2}}</p>

				</h2>
				<div style="height: 105px"></div>

				<div class="s-con-xcx">
					{% for ser in data.serverRangeList %}
					<div class="x-row">
						<div class="x-row-1">
							<img class="animated" src="{{ser.serverImg}}}">
						</div>
						<p class="x-row-2">{{ser.serverContent}}</p>
						<p class="x-row-3">{{ser.serverDetails}}</p>
						<ul class="x-row-4">
							<!--rotateInDownRight-->
							{% for include in ser.serverContentsInclude %}
							<li><a href="#" class="animated bounce  ">{{include}}</a></li>
							{% endfor %}
						</ul>
					</div>
					{% endfor %}
				</div>
				<div id="s-con-bot_w"></div>
			</div>
		</div>

		<!--page03 $ -->
		<div class="page03">
			<div class="li-img02" style=" background: url(/static/images/page03.jpg) no-repeat center;"></div>
			<div class="page03-con">
				<h2 class="page-title">
					<img src="/static/images/title-c.png">
				</h2>
				<p class="p1">{{data.caseShows.0}}</p>
				<p class="p2">{{data.caseShows.1}}</p>
			</div>
			<div class="c-con">
				<ul>
					{% for showData in data.caseShowsList %}
					<li>
						<div class="port-3 effect-2">
							<div class="image-box1">
								<img style=" width: 381px; height: 228px;" src="{{showData.caseShowsImg}}"
									alt="Image-2">
							</div>
							<div class="text-desc1">
								<h3 class="case-title">{{showData.caseShowsName}}</h3>
								<p class="p-line"></p>
								<a href="detail.html#id/50.html" class="a-more">{{showData.theStory}}</a>
							</div>
						</div>
					</li>
					{% endfor %}
					<li>
				</ul>
				<div class="clear"></div>
			</div>
			<a href="anli.html" target="_blank" class="a-case">{{data.caseShowsLoadMore}}</a>
		</div>
		<!--page03 end-->
		<!--page04-->
		<div class="page04">
			<div class="li-img03" style=" background: url(/static/images/page04.jpg) no-repeat center;"></div>
			<div class="page04-con">
				<h2 class="page-title">
					<img src="/static/images/title-n.png">
				</h2>
				<p class="p1">{{data.newsIntroduce}} </p>
			</div>
			<div class="n-con">
				<ul>
					{% for new in data.newsList %}
					<li>
						<h2 class="new-title"><a href="detail.html#id/57.html" target="_blank">{{new.newTitle}}</a>
						</h2>
						<p class="new-des">{{new.newDes}}</p>
						<p class="new-date">
							<em>{{new.newDateOne}}</em><span class="line-span"></span><span
								class="year-span">{{new.newDateYear}}</span><a href="detail.html#id/57.html"
								class="new-a"></a>
						</p>
					</li>
					{% endfor %}
				</ul>
				<div class="clear"></div>
			</div>
			<a href="anli.html" target="_blank" class="a-new">{{data.newsLoadMore}}</a>
		</div>
		<!--page04 end-->
		<!--page05-->
		<div class="page05">
			<div class="li-img04" style=" background: url(/static/images/page05.jpg) no-repeat center;"></div>
			<div class="page05-con">
				<h2 class="page-title">
					<img src="/static/images/title-a.png">
				</h2>
				<p class="p1">{{data.cooperationUser.0}}，</p>
				<p class="p2">{{data.cooperationUser.1}}</p>
			</div>
			<div class="cus-con">
				<div class="cus-left">
					<div class="left01"><img src="/static/images/customer01.png"></div>
					<div class="left02"><img src="/static/images/customer02.png"></div>
					<div class="left03"><img src="/static/images/customer03.png"></div>
				</div>
				<div class="cus-right">
					<ul id="iconWall">
						{% for coo in data.cooperationUserList %}
						<li>
							<div class="img-3d">
								<div class="img-back"
									style="background: #fff url(/static/images/{{coo.cooperationUserImg1}}) no-repeat center;">
								</div>
								<div class="img-front"
									style="background: #fff url(/static/images/{{coo.cooperationUserImg2}}) no-repeat center;">
								</div>
							</div>
						</li>
						{% endfor %}
					</ul>
					<div id="btnRefresh">
						<div class="iconRefresh"></div>
						<span>{{data.cooperationUser.2}}</span>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<script type="text/javascript">
				window.onload = function() {
					var clickTimes = 1;
					//总列数
					var lineCount = 6;
					var btnRefresh = document.querySelector("#btnRefresh");
					var iconRefresh = document.querySelector(".iconRefresh")
					var img3DList = document.querySelectorAll(".img-3d");
					var len = img3DList.length;
					btnRefresh.onclick = function() {
						iconRefresh.style.transition = ".3s linear";
						iconRefresh.style.transform = "rotate(" + 360 * clickTimes + "deg)";
						for (var i = 0; i < len; i++) {
							var colNum = parseInt(i / lineCount);
							var rowNum = i % lineCount;
							var delayTime = (colNum + rowNum) * 100;
							img3DList[i].style.transition = ".3s " + delayTime + "ms linear";
							img3DList[i].style.transform = "rotateY(" + 180 * clickTimes + "deg)";
						}
						clickTimes++;
					}
				}
			</script>
		</div>
		<!-- 尾部============================ -->
		{% include 'footer.html' %}
		<!-- 尾部============================ -->
	</body>
</html>
